import { Meta } from '@storybook/blocks';

import * as DecoratedBoxTransitionStories from '../stories/DecoratedBoxTransition.stories';

<Meta of={DecoratedBoxTransitionStories} />

# DecoratedBoxTransition

Animated version of a DecoratedBox that animates the different properties of its Decoration.

## Example

```dart liveslice=DecoratedBoxTransition height=400px
final DecorationTween decorationTween = DecorationTween(
  begin: BoxDecoration(
    color: const Color(0xFFFFFFFF),
    border: Border.all(
      color: const Color(0xFF000000),
      style: BorderStyle.solid,
      width: 4.0,
    ),
    borderRadius: BorderRadius.zero,
    shape: BoxShape.rectangle,
    boxShadow: const <BoxShadow>[
      BoxShadow(
        color: Color(0x66000000),
        blurRadius: 10.0,
        spreadRadius: 4.0,
      )
    ],
  ),
  end: BoxDecoration(
    color: const Color(0xFF000000),
    border: Border.all(
      color: const Color(0xFF202020),
      style: BorderStyle.solid,
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(10.0),
    shape: BoxShape.rectangle,
    // No shadow.
  ),
);

AnimationController _controller;

bool _first = true;

initState() {
  _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1),
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      DecoratedBoxTransition(
        position: DecorationPosition.background,
        decoration: decorationTween.animate(_controller),
        child: Container(
          child: Container(
            width: 200,
            height: 200,
            padding: EdgeInsets.all(20),
            child: FlutterLogo(),
          ),
        ),
      ),
      SizedBox(height: 20,),
      FlatButton(
        onPressed: () {
          if (_first) {
            _controller.forward();
          } else {
            _controller.reverse();
          }
          _first = !_first;
        },
        child: Text(
          "Click Me!",
        ),
      )
    ],
  );
}
```

## Related Links

- https://api.flutter.dev/flutter/widgets/DecoratedBoxTransition-class.html
